<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" @touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	import facecat_uni from './facecat_uni.js';
	let gPaint = new facecat.FCPaint();
	
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				if(document){
					canvas = document.querySelector('#myCanvas');
					gPaint.isMobile = facecat.isMobileMode();
					facecat.addDefaultEvent(canvas, gPaint);
				}else{
					canvas = uni.createSelectorQuery('#myCanvas');
					gPaint.isMobile = true;
				}
				//注册事件
				uni.getSystemInfo({ 
				  success: (res) => {
					this.widthEle = res.windowWidth;
					this.heightEle = res.windowHeight;
				  }
				});
				this.windowResizeCallback = (res) => {
					try {
						this.widthEle = res.size.windowWidth;
						this.heightEle = res.size.windowHeight;
						let canvas = null;
						if(document){
							canvas = document.querySelector('#myCanvas');
						}else{
							canvas = uni.createSelectorQuery('#myCanvas');
						}
						canvas.width = this.widthEle;
						canvas.height = this.heightEle;
						facecat.updateViewDefault(gPaint.views);
					} catch (err) {
					}
					facecat.invalidate(gPaint);
				};
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				/*
				* 重绘背景的实现方法
				* view:视图
				* paint:绘图对象
				* clipRect:裁剪区域
				*/
				gPaint.onPaint = function (view, paint, clipRect) {
					facecat.onPaintDefault(view, paint, clipRect);
					if (view.viewName == "TabPage") {
						paint.drawLine("rgb(255,0,0)", 1, [], 100, 100, 300, 300);
						paint.drawLine("rgb(255,0,255)", 1, [5, 5], 100, 300, 300, 100);
					} else if (view.viewName == "TabPage2") {
						paint.drawRect("rgb(0,255,0)", 1, [], 100, 100, 200, 200);
						paint.fillRect("rgb(0,255,255)", 250, 250, 350, 350);
					} else if (view.viewName == "TabPage3") {
						paint.drawEllipse("rgb(0,255,255)", 1, [], 100, 100, 200, 200);
						paint.fillEllipse("rgb(255,0,255)", 250, 250, 350, 350);
					} else if (view.viewName == "TabPage4") {
						paint.drawText("FaceCat", "rgb(255,0,0)", "Default,30", 100, 100);
					} else if (view.viewName == "TabPage5") {
						paint.beginPath();
						paint.addLine(100, 100, 150, 120);
						paint.addLine(150, 120, 130, 200);
						paint.addLine(130, 200, 200, 200);
						paint.addLine(200, 200, 250, 220);
						paint.drawPath("rgb(255,0,0)", 1, []);
						paint.closePath();
					} else if (view.viewName == "TabPage6") {
						paint.beginPath();
						paint.addLine(100, 100, 150, 120);
						paint.addLine(150, 120, 200, 200);
						paint.addLine(200, 200, 150, 200);
						paint.fillPath("rgb(0,0,255)");
						paint.closePath();
					}
				};
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="UTF-8"?>
				<html xmlns="facecat">
					<head>
					</head>
					<body>
						<div dock="fill" type="tab" selectedindex="0">
							<div name="TabPage" text="直线" type="tabpage" headersize="60,20"/>
							<div name="TabPage2" text="矩形" type="tabpage" headersize="60,20"/>
							<div name="TabPage3" text="圆" type="tabpage" headersize="60,20"/>
							<div name="TabPage4" text="文字" type="tabpage" headersize="60,20"/>
							<div name="TabPage5" text="折线" type="tabpage" headersize="60,20"/>
							<div name="TabPage6" text="多边形" type="tabpage" headersize="60,20"/>
						</div>
					</body>
				</html>
				`;
				if(document){
					facecat.renderFaceCat(gPaint, xml);
				}else{
					canvas.id = "myCanvas";
					facecat_uni.renderFaceCatUni(gPaint, xml);
				}
		},
		methods: {
			touchStartCanvas: function (e) {
				facecat_uni.handleTouchStart(gPaint, e, null);
			},touchMoveCanvas: function (e) {
				facecat_uni.handleTouchMove(gPaint, e, null);
			},touchEndCanvas: function (e) {
				facecat_uni.handleTouchEnd(gPaint, e, null, null);
			}
		}
	}
</script>

<style>
</style>
